﻿@model BootyBay.Models.View_Application

@{
    ViewBag.Title = "ApplicationInfo";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<SelectListItem> categoryList = (ViewBag.CategoryList as List<BootyBay.Models.Category>)
        .Select(c => new SelectListItem() { Text = c.Value, Value = c.Id.ToString() })
        .ToList();
    List<String> keywords = new List<string>();
    if (!string.IsNullOrEmpty(Model.Keywords))
    {
        keywords = Model.Keywords.Split(';').ToList();
    }
}
<style>
    .screenshot {
        width: 240px;
        height: 200px;
        margin: 20px;
        border: 1px dotted #808080;
        line-height: 200px;
        text-align: center;
        color: black;
    }

        .screenshot:hover {
            cursor: pointer;
            color: #0094ff;
        }

    .screenshotimg {
        max-width: 235px;
        max-height: 200px;
    }

    .imageUpload {
        top: 0;
        left: -9999em;
        position: absolute;
    }
</style>

<h2>Application Info</h2>
<h2>@(Model.ApplicationName)</h2>
<p>The info on this page is used to refer to your app here in the Dev Center, and also controls how it appears in the Store.</p>

@using (Html.BeginForm(new { Id = Model.Id, Id_ApplicationVersion = Model.Id_ApplicationVersion }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true)

        <h3>App name</h3>
        <div>
            <span>App alias *</span>
            <p>This name is used to refer to your app here on Dev Center. The name your customer sees is read directly from your package.</p>
            @Html.EditorFor(model => model.ApplicationName)
        </div>

        <h3>Description</h3>
        <div>
            @Html.TextAreaFor(model => model.Description, new { rows = 5, cols = 100 })
        </div>

        <h3>Keywords</h3>
        <div>
            @for (int i = 0; i < 10; i++)
            {
                if (i >= keywords.Count)
                {
                    <input type="text" name="keyword" value="" />
                }
                else
                {
                    <input type="text" name="keyword" value="@keywords[i]" />
                }
            }
        </div>

        <h3>App category</h3>
        <p>The Category and Subcategory determine where the app will be listed in the Store.</p>
        <div>
            <span>Category</span>
            @Html.DropDownListFor(model => model.Category, categoryList)
            <div style="display:none">
                <span>Subcategory</span>
                @Html.DropDownListFor(model => model.Subcategory, new List<SelectListItem>() { new SelectListItem() { Text = "1", Value = "1" } })
            </div>
        </div>

        <h3>Application Status</h3>
        <label><input type="checkbox" name="IsRecommended">Recommend this application</label><br />
        <label><input type="checkbox" name="IsHidden">Is hidden from store?</label>

        @if (Model.Id > 0)
        {

            <h3>Package Submission</h3>

            if (ViewBag.Status == (int)BootyBay.Models.AppStatus.Published)
            {
                <p>This version has been published to app store.</p>
            }
            else
            {
                <div>
                    appx: <input type="file" id="appx" /> <br />
                    cer: <input type="file" id="cer" /> <br />
                    <input type="button" onclick="upload();" value="Upload" />
                    <progress id="progressBar" value="0" max="100"></progress>
                    <div id="submission"></div>
                    <script type="text/javascript">
                        function upload() {                            

                            var appx = document.getElementById("appx").files[0];
                            var cer = document.getElementById("cer").files[0];

                            var url = "@Url.Content("~/package/upload/")@Model.Id";                            

                            var form = new FormData();
                            form.append("file", appx);
                            form.append("file", cer);

                            if (window.XMLHttpRequest) {
                                var oReq = new XMLHttpRequest();
                                $("#submission").append("<span>It will take a while for analyzing package after uploaded. Please do not close window before completed.</span>");

                                oReq.open("POST", url, true);
                                oReq.onload = function () {
                                    //var jsonResponse = JSON.parse(oReq.responseText)
                                    //alert(jsonResponse.IdentityName);
                                    $("#submission").replaceWith(oReq.responseText);
                                };
                                oReq.upload.onprogress = progressFunction;
                                    
                                
                                oReq.send(form);

                            } else {
                                // XMLHttpRequest not supported; handle fallback
                            }
                        }

                        function progressFunction(e) {
                            var progressBar = document.getElementById("progressBar");
                            if (e.lengthComputable) {
                                progressBar.max = e.total;
                                progressBar.value = e.loaded;
                            }
                        }
                    </script>

                    <h4>Packages uploaded</h4>
                    <p>
                        @if (ViewBag.PackageList != null)
                        {
                            foreach (var package in ViewBag.PackageList)
                            {
                                @package.PackageLocationUrl<br />
                            }
                        }
                    </p>
                </div>
            }

            <h3>Screenshots</h3>
            <div>
                <table>
                    <tr>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div>
                            <input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div>
                            <input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div>
                            <input type="file" class="imageUpload" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                        <td>
                            <div class="screenshot">
                                <a href="javascript:{}">Add image</a>
                            </div><input type="file" class="imageUpload" />
                        </td>
                    </tr>
                </table>
            </div>
        }

        <br />
        <div>
            @if (Model.Id == 0)
            {
                <h3>Save application information to upload packages and screen shots</h3>
            }
            else
            {
                <h3>Save changes</h3>
            }
            <input type="submit" value="Save" />
        </div>
    </div>
}

<br /><br />
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section scripts
{
    <script type="text/javascript">
        $(function () {
            var urlstring = '@Model.ScreenshotUrls';
            var urls = urlstring.split(';');

            var imageContainers = $('.screenshot');

            for (var i = 0; i < urls.length; i++) {
                var url = urls[i];
                if (url != "") {
                    var image = $("<img class='screenshotimg' src='" + url + "' />")
                    imageContainers.filter(':eq(' + i + ')').empty().append(image);
                }
            }
        });

        $('.screenshot').click(function () {
            $(this).siblings("input[type=file]").trigger("click");
        })

        $('.imageUpload').change(function () {
            var uploader = $(this);

            var path = uploader.val();
            if (path.length < 4 || path.substring(path.length - 4, path.length) != ".png") {
                alert('Wrong image format, please select png file');
            }
            else {

                var img = $(this)[0].files[0];
                var url = "@Url.Content("~/package/uploadimage/")@Model.Id";

                var form = new FormData();

                form.append("index", uploader.index('.imageUpload'));
                form.append("file", img);

                if (window.XMLHttpRequest) {
                    var oReq = new XMLHttpRequest();
                    oReq.open("POST", url, true);
                    oReq.onload = function () {
                        var jsonResponse = JSON.parse(oReq.responseText)
                        var imgurl = jsonResponse.url;
                        var image = $("<img class='screenshotimg' src='" + imgurl + "' />")
                        uploader.siblings("div").empty().append(image);
                    };
                    oReq.send(form);

                }
            }
        })
    </script>
}